import React from 'react'
import { Stack, Tabs } from 'expo-router'
import UIConstants from '../constants/UIConstants';
import AntDesign from '@expo/vector-icons/AntDesign';
import { Text } from 'react-native';

export default function MyTopLayout() {
    return (
        // <Tabs></Tabs>
        <Tabs screenOptions={{
            headerStyle: {
                backgroundColor: UIConstants.COLOR_GREEN,//背景颜色
            },
            // headerTitleStyle: {
            //     fontWeight: 'bold',
            // },
            headerTitleAlign: "center",//文字对齐方式
            headerTintColor: '#fff',//文字颜色
            tabBarActiveTintColor: UIConstants.COLOR_GREEN,//页签栏激活时的颜色
            // tabBarInactiveTintColor:UIConstants.COLOR_RED,//页签栏非激活时的颜色
            // tabBarInactiveBackgroundColor:UIConstants.COLOR_GRAY_LIGHT,//页签栏非激活时的背景颜色
        }}>
            <Tabs.Screen name='index' options={{
                title: "首页",
                headerRight: () => (
                    <>
                        <AntDesign name='search1' size={24} color={UIConstants.COLOR_WHITE} />
                    </>
                ),
                tabBarIcon: ({ focused, color, size, }) => (//解构
                    <AntDesign name='home' size={size} color={color} />
                ),

            }} />
            <Tabs.Screen name='mine' options={{
                title: "我的",
                tabBarIcon: ({ focused, color, size, }) => (//解构
                    <AntDesign name='user' size={size} color={color} />
                )

            }} />
            <Tabs.Screen name='news' options={{
                title: "新闻列表",
                tabBarIcon: ({ focused, color, size, }) => (//解构
                    <AntDesign name='bars' size={size} color={color} />
                )
            }} />
        </Tabs>
    )
}